const srnysrzbColors = ['#6DD19C','#704FE6','#2DF3FF','#FF7552'];
var srnysrzbOpt = {
    angleAxis: {
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        min: 0,
        max: 200,
        boundaryGap: ['0', '100'],
        startAngle: 180
    },
    radiusAxis: {
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        data: ['a'],
        z: 10
    },
    polar: {
        radius: ['70%', '80%'],
        center: ['50%', '60%'],
    },
    series: [{
            type: 'bar',
            data: [],
            coordinateSystem: 'polar',
            barMaxWidth: 10,
            z: 4,
            roundCap: true,
            color: srnysrzbColors[0],
        },
        {
            type: 'bar',
            data: [],
            z: 3,
            silent: true,
            coordinateSystem: 'polar',
            barMaxWidth: 10,
            roundCap: true,
            color: srnysrzbColors[1],
            barGap: '-100%',
        },
        {
            type: 'bar',
            data: [],
            z: 2,
            silent: true,
            coordinateSystem: 'polar',
            barMaxWidth: 10,
            roundCap: true,
            color: srnysrzbColors[2],
            barGap: '-100%',
        },{
            type: 'bar',
            data: [],
            z: 1,
            silent: true,
            coordinateSystem: 'polar',
            barMaxWidth: 10,
            roundCap: true,
            color: srnysrzbColors[3],
            barGap: '-100%',
        },{
            type: 'bar',
            data: [],
            z: 0,
            silent: true,
            coordinateSystem: 'polar',
            barMaxWidth: 10,
            roundCap: true,
            color: srnysrzbColors[4],
            barGap: '-100%',
        },
        {
            type: "gauge",
            radius: ["100%","100%"],
            startAngle: 180, //刻度起始
            endAngle: 0, //刻度结束
            z: 5,
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false
            },
            axisLine: {
                show: false
            },
            detail: {
                show: true,
                color: '#000',
                offsetCenter: [0, '10'],
                textStyle: {
                	rich:{
                		b:{
                			fontSize:34,
                			color: '#000',
                			fontWeight: "bolder",
                			lineHeight: 35
                		},
                		a:{
                			fontSize:14,
                			color: '#000',
							fontWeight: "bolder",
                		}
                	}
                }
            },
            data: [{
                name: ""
            }]
        }
    ],

    tooltip: {
        show: false
    },

};

const srnysrzb1 = parseInt(Math.random()*100);
const srnysrzb2 = parseInt(Math.random()*100);
const srnysrzb3 = parseInt(Math.random()*100);
const srnysrzb4 = parseInt(Math.random()*100);

const srnysrzbTotal = srnysrzb1 + srnysrzb2 + srnysrzb3 + srnysrzb4;

//console.log(srnysrzb1,srnysrzb2,srnysrzb3,srnysrzb4,srnysrzb5)

const rate1 = parseInt(srnysrzb1 * 100 / srnysrzbTotal);
const rate2 = parseInt(srnysrzb2 * 100 / srnysrzbTotal);
const rate3 = parseInt(srnysrzb3 * 100 / srnysrzbTotal);
const rate4 = parseInt(srnysrzb4 * 100 / srnysrzbTotal);

$('#rate1').text(rate1 + '%');
$('#rate2').html(rate2 + '%');
$('#rate3').html(rate3 + '%');
$('#rate4').html(rate4 + '%');

srnysrzbOpt.series[0].data=[ rate1];
srnysrzbOpt.series[1].data=[ rate1 + rate2 ];
srnysrzbOpt.series[2].data=[ rate1 + rate2 + rate3];
srnysrzbOpt.series[3].data=[ rate1 + rate2 + rate3 + rate4];


srnysrzbOpt.series[5].detail.formatter = function(e){
	return `{b|${srnysrzbTotal}}\n{a|总销售（万元）}`;
}
echarts.init(document.getElementById('srnysrzb')).setOption(srnysrzbOpt, true);